{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="{% static '/js/jquery-3.3.1.js' %}"></script>
    <style>
        input{
            height: 15px;
            width: 20%;
        }
        textarea{
            width: 20%;
        }
        .select1{
            height: 25px;
            width: 20.4%;
        }
        .inputbox{
            height: 30px;
            line-height: 30px;
        }
        .lable{
            display: inline-block;
            height: 15px;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }
        .err{
            margin-left: 10px;
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div style="text-align: center;margin-top: 5%;">
        <form action="/add/{{ addwhich }}/" method="post">
            <div class="inputbox"><span class="lable" style="margin-left: 18px;">名字*:</span><input type="text" name="name"><span style="display: inline-block;margin-left: 10px;"><i id="name_err_info" class="err"></i></span></div>
            <div class="inputbox"><span class="lable">性别:</span><input type="text" name="sex"></div>
            <div class="inputbox"><span class="lable">年龄:</span><input type="text" name="age"></div>
            <div class="inputbox">
                <span class="lable" style="margin-left: 18px;">班级*:</span>
                <select class="select1" name="clsid">
                    <option>--请选择--</option>
                    {% for i in clses %}
                        <option>{{ i.name }}</option>
                    {% endfor %}
                </select>
                <span style="display: inline-block;margin-left: 10px;"><i id="clsid_err_info" class="err"></i></span>
            </div>
            <div class="inputbox"><span class="lable" style="margin-left: 18px;">手机号码*:</span><input type="text" name="phonenum"><span style="display: inline-block;margin-left: 10px;"><i id="phonenum_err_info" class="err"></i></span></div>
            <div class="inputbox"><span class="lable">QQ号码:</span><input type="text" name="qq"></div>
            <div class="inputbox"><span class="lable">毕业学校:</span><input type="text" name="school"></div>
            <div id="sel1" class="inputbox" style="height: 60px;line-height: 30px;">
                <span class="lable" style="margin-left: 240px;">家庭住址:</span>
                <select id="provience" style="width: 150px;height: 20px;line-height: 20px;"><option>--------请选择省--------</option></select>
                <select id="city" style="width: 180px;height: 20px;line-height: 20px;"><option>-----------请选择市-----------</option></select>
                <select id="county" style="width: 180px;height: 20px;line-height: 20px;"><option>---------请选择县/区---------</option></select><br/>
                <input class="street" type="text" name="homeaddr" value="请填写街道信息" style="margin-left: 335px;width: 515px;">
            </div>
            <div id="sel2" class="inputbox" style="height: 60px;line-height: 30px;">
                <span class="lable" style="margin-left: 240px;">当前住址*:</span>
                <select id="provience2" style="width: 150px;height: 20px;line-height: 20px;"><option>--------请选择省--------</option></select>
                <select id="city2" style="width: 180px;height: 20px;line-height: 20px;"><option>-----------请选择市-----------</option></select>
                <select id="county2" style="width: 180px;height: 20px;line-height: 20px;"><option>---------请选择县/区---------</option></select><br/>
                <input class="street" type="text" name="addr" value="请填写街道信息" style="margin-left: 360px;width: 515px;">
                <span style="display: inline-block;margin-left: 10px"><i id="addr_err_info" class="err"></i></span>
            </div>
            <div class="inputbox"><span class="lable">学习进度:</span><input type="text" name="progress"></div>
            <div class="inputbox"><span class="lable">工作:</span><input type="text" name="job"></div>
            <div class="inputbox" style="height: 60px;line-height: 30px;"><span class="lable" style="vertical-align: top;">备注:</span><textarea type="text" name="remark" style="height: 54px;"></textarea></div>
            <div class="inputbox"><input id="submit" type="submit" value="提交" style="height: 30px;width: 40px;margin-left: 80px;"></div>
            {% csrf_token %}
        </form>
    </div>

    <script>
        var names = document.getElementsByName("name")[0];
        names.onfocus=function (event) {
            document.getElementById("name_err_info").innerText = "";
        };
        names.onblur=function (event) {
            nameslen = document.getElementsByName("name")[0].value.length;
            if (nameslen === 0){
                document.getElementById("name_err_info").innerText = "请输入名字";
                event.preventDefault()
            }
        };

        var clsid = document.getElementsByName("clsid")[0];
        clsid.onfocus=function(event){
            document.getElementById("clsid_err_info").innerText = "";
        };
        clsid.onblur=function (event) {
            if (clsid.value === "--请选择--"){
                document.getElementById("clsid_err_info").innerText = "请选择班级";
                event.preventDefault()
            }
        };

        var phonenum = document.getElementsByName("phonenum")[0];
        phonenum.onfocus=function(event){
            document.getElementById("phonenum_err_info").innerText = "";
        };
        phonenum.onblur=function(event) {
            var patphonenum=/^1[3456789]\d{9}$/;
            if (phonenum.value.search(patphonenum) < 0){
                phonenumlen = document.getElementsByName("phonenum")[0].value.length;
                if (phonenumlen === 0 || phonenumlen > 11){
                    document.getElementById("phonenum_err_info").innerText = "手机号码位数不正确";
                    event.preventDefault()
                }
                else{
                    document.getElementById("phonenum_err_info").innerText = "请输入正确的手机号";
                    event.preventDefault()
                }
            }
        };

        var addr = document.getElementsByName("addr")[0];
        addr.onfocus=function(event){
            document.getElementById("addr_err_info").innerText = "";
        };
        addr.onblur=function(event) {
            addrlen = document.getElementsByName("addr")[0].value.length;
            if (addrlen <= 0){
                document.getElementById("addr_err_info").innerText = "请输入你的当前住址";
                event.preventDefault()
            }
        };

        document.getElementById('submit').onclick = function (event) {
            nameslen = document.getElementsByName("name")[0].value.length;
            if (nameslen === 0){
                document.getElementById("name_err_info").innerText = "请输入名字";
                event.preventDefault()
            }

            clsid = document.getElementsByName("clsid")[0];
            if (clsid.value === "--请选择--"){
                document.getElementById("clsid_err_info").innerText = "请选择班级";
                event.preventDefault()
            }

            phonenumlen = document.getElementsByName("phonenum")[0].value.length;
            if (phonenumlen === 0 || phonenumlen > 11){
                document.getElementById("phonenum_err_info").innerText = "手机号码位数不正确";
                event.preventDefault()
            }

            addrlen = document.getElementsByName("addr")[0].value.length;
            if (addrlen <= 0){
                document.getElementById("addr_err_info").innerText = "请输入你的当前住址";
                event.preventDefault()
            }
        };

        {# 三级联动 #}
        {% for i in proviences %}
            option = document.createElement('option');
            option.innerHTML='{{ i }}';
            $('#provience').append(option);
        {% endfor %}

        $("#provience").change(function () {          {# 省份变化时 #}
            $.post('/add/{{ addwhich }}/',{'pro':$("#provience option:selected")[0].value,'csrfmiddlewaretoken':'{{ csrf_token }}'},function (data) {
                cityname = data.split(',');      {# 将获得的市用"," 分隔开，组成一个列表#}
                $('#city')[0].options.length=0;  {# 清空所有的option #}
                for (i in cityname){             {# 为第二个选择框建立option #}
                    if (cityname[i].length>0){
                        option = document.createElement('option');
                        option.innerHTML=cityname[i];
                        $('#city').append(option);
                    }
                }
                citychange();   {# 让第三级变成动态的，随前两级一起变化 #}
            })
        });
        function citychange() {             {# 市变化时 #}
            $.post('/add/{{ addwhich }}/',{'city':$("#city option:selected")[0].value,'csrfmiddlewaretoken':'{{ csrf_token }}'},function (data) {
                countyname = data.split(',');       {# 将获得的县用"," 分隔开，组成一个列表#}
                $('#county')[0].options.length=0;   {# 清空所有的option #}
                for (i in countyname){              {# 为第三个选择框建立option #}
                    if (countyname[i].length>0){
                        option = document.createElement('option');
                        option.innerHTML=countyname[i];
                        $('#county').append(option);
                    }
                }
            })
        }
        $("#city").change(citychange);

        {% for i in proviences %}
            option = document.createElement('option');
            option.innerHTML='{{ i }}';
            $('#provience2').append(option);
        {% endfor %}
        $("#provience2").change(function () {          {# 省份变化时 #}
            $.post('/add/{{ addwhich }}/',{'pro':$("#provience2 option:selected")[0].value,'csrfmiddlewaretoken':'{{ csrf_token }}'},function (data) {
                cityname = data.split(',');      {# 将获得的市用"," 分隔开，组成一个列表#}
                $('#city2')[0].options.length=0;  {# 清空所有的option#}
                for (i in cityname){             {# 为第二个选择框建立option #}
                    if (cityname[i].length>0){
                        option = document.createElement('option');
                        option.innerHTML=cityname[i];
                        $('#city2').append(option);
                    }
                }
                citychange1();   {# 让第三级变成动态的，随前两级一起变化 #}
            })
        });
        function citychange1() {             {# 市变化时 #}
            $.post('/add/{{ addwhich }}/',{'city':$("#city2 option:selected")[0].value,'csrfmiddlewaretoken':'{{ csrf_token }}'},function (data) {
                countyname = data.split(',');       {# 将获得的县用"," 分隔开，组成一个列表#}
                $('#county2')[0].options.length=0;   {# 清空所有的option#}
                for (i in countyname){              {# 为第三个选择框建立option #}
                    if (countyname[i].length>0){
                        option = document.createElement('option');
                        option.innerHTML=countyname[i];
                        $('#county2').append(option);
                    }
                }
            })
        }
        $("#city2").change(citychange1);

        $(".street").focus(function () {
            if ($(this).val()==="请填写街道信息"){
                $(this).val("")
            }
        });
        $(".street").blur(function () {
            if (!$(this).val()){
                $(this).val("请填写街道信息")
            }
        });

    </script>
</body>
</html>